<template>
  <div class="container box-container">
    <div class="tabs flex-row">
      <div
        class="tab"
        :class="tab == i ? 'active' : ''"
        v-for="(item, i) in tabList"
        :key="i"
        @click="tabClick(item, i)"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="tab-contain">
      <!-- <img :src="ip" /> -->
      <component :is="cmp"></component>
    </div>
  </div>
</template>
<script>
import systemManagement from "./systemManagement.vue";
import modelManagement from "./modelManagement.vue";
// import modelTraining from "./modelTraining.vue";
export default {
  name: "",
  components: { modelManagement, systemManagement },
  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      tab: 0,
      tabList: [
        { name: "指标体系模型管理", cmp: "systemManagement" },
        { name: "评估模型管理", cmp: "modelManagement" },
        // { name: "模型优化训练", cmp: "modelTraining" },
      ],
      cmp: "systemManagement",
    };
  },
  methods: {
    tabClick(item, n) {
      this.tab = n;
      this.cmp = item.cmp;
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  // height: calc(100vh - 84px);
  .tabs {
    margin: 0 0 10px;
    background-color: #fff;
    .tab {
      color: #c0c4cc;
      border: 0;
      border-bottom: 2px solid transparent;
      border-radius: 0;
      padding: 7px 15px;
      font-size: 12px;
      margin: 0 5px;
      cursor: pointer;
    }
    .tab.active {
      border-bottom: 2px solid #3670f5;
      color: #3670f5;
      background-color: #fff;
    }
  }
  .tab-contain {
    width: 100%;
    height: calc(100% - 40px);
    background-color: #fff;
    padding: 0 20px;
    // img{
    //   width: 100%;
    //   height: 100%;
    // }
  }
  // .tab0{
  //   background: url('~@/assets/myself_img/WechatIMG41.png');
  //   background-size: 100% 100%;
  // }
  // .tab0{
  //   background: url('~@/assets/myself_img/WechatIMG40.png');
  //   background-size: 100% 100%;
  // }
}
</style>
